<template>
    <el-card>
        <div class="permissions">
            <el-row :gutter="10" style="margin-bottom: 20px;">
                <el-col :span="24">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="editHandle()">添加权限</el-button>
                </el-col>
            </el-row>

            <!-- 表格 -->
            <el-table
                    class="custom-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        width="80">
                    <template slot-scope="scope"> {{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="职位名称"  width="180">
                    <template slot-scope="scope">
						<span>{{ scope.row.name }}</span>
					</template>
                </el-table-column>
                <el-table-column label="权限">
                    <template slot-scope="scope">
						<span>{{ scope.row.rules_list }}</span>
					</template>

                </el-table-column>
                <el-table-column
                        label="操作" width="260">
                    <template slot-scope="scope">
						<el-button type="primary" size="mini" @click="editPermissions(scope.row.id)">菜单授权</el-button>
						<el-button type="danger" size="mini" @click="editHandle(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleHandle(scope.row.id)">删除</el-button>
					</template>
                    
                    <!-- <template slot>
                        <el-button type="success" size="mini" @click="editPermissions(123)">菜单授权</el-button>
                        <el-button type="primary" size="mini" @click="editHandle(123)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleHandle(123)">删除</el-button>
                    </template> -->


                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="custom-pagination">
                <el-pagination background layout="prev, pager, next,sizes" :total="total"
                               @current-change="pageChange"
                               @size-change="handleSizeChange"
                               :page-size="pagesize"
                               :page-sizes="[10, 20, 50, 100]">
                </el-pagination>
            </div>

            <!--  弹窗 -->
            <edit-permissions v-if="showModal" ref="myModal" @refreshDataList="refreshDataList"></edit-permissions>
            <edit-post v-if="showModal2" ref="myModal2" @refreshDataList="refreshDataList"></edit-post>
        </div>
    </el-card>
</template>

<script>
    // EditWeChat
    import EditPermissions from "./components/EditPermissions";
    import EditPost from "./components/EditPost";

    export default {
        components: {
            EditPermissions,
            EditPost
        },
        data() {
            return {
                showModal: false,
                showModal2: false,
                page: 1, // 当前页码
                pagesize: 10, // 当前条数
                total: 0, // 总条数
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                tableData: [
                //     {
                //     date: '2016-05-03',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-02',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-04',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-01',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-08',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-06',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }, {
                //     date: '2016-05-07',
                //     name: '超级管理员',
                //     address: '权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心，权限设置，账号中心'
                // }
                ],
            }
        },
        mounted() {
            this.loadData();
			this.get_list();
        },
        methods: {
            loadData() { // 加载列表数据

            },

            refreshDataList(){
				 console.log("a22")
				 this.showModal = false;
                this.showModal2 = false;
				 this.get_list();
			},

            get_list(){
				this.$http.post("roles/lists",{page:this.page,limit:this.pagesize}).then((response) => {
					this.total=response.data.total;
					this.tableData=response.data.records;
					console.log(this.tableData)
				})
			},
            pageChange(page) {
                console.log(page)
                this.page = page;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val;
            },
            editHandle(id) {
                this.showModal2 = true;
                this.$nextTick(() => {
                    this.$refs.myModal2.init(id);
                })
            },
            editPermissions(id) {
                this.showModal = true;
                this.$nextTick(() => {
                    this.$refs.myModal.init(id);
                })
            },
            
            deleHandle(id) {
                
                this.$confirm('确认删除已选记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids=[];
                    
                    ids.push(id)
                    this.axios.post('roles/del', {id:ids}).then(response => {
                        if (response.code === 1) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                            this.page = 1;
                            this.get_list();
                        } else {
                            this.$message({
                                type: 'error',
                                message: response.msg
                            })
                        }
                    })
                }).catch(() => {
                    console.log('取消退出');
                });
                
            },
        }
    }
</script>

<style scoped lang="scss">

</style>